import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { Switch, Route, withRouter } from 'react-router';
import Loadable from 'react-loadable';

import Loading from '../components/common/lazyLoading';

export const basePath = '/pay';

export const routes = [
  {
    path: '/exceptionPay',
    component: Loadable({
      loader: () => import('../pages/pay/exceptionPay'),
      loading: Loading,
    }),
  },
  {
    path: '/qijiRefuel',
    component: Loadable({
      loader: () => import('../pages/pay/pay.refuel.qiji'),
      loading: Loading,
    }),
  },
  {
    path: '/pay',
    component: Loadable({
      loader: () => import('../pages/pay/pay'),
      loading: Loading,
    }),
  },
  {
    path: '/payTmall',
    component: Loadable({
      loader: () => import('../pages/pay/pay.tmall'),
      loading: Loading,
    }),
  },
  {
    path: '/payOrder',
    component: Loadable({
      loader: () => import('../pages/pay/pay.order'),
      loading: Loading,
    }),
  },
  {
    path: '/alipay',
    component: Loadable({
      loader: () => import('../pages/pay/aliPay'),
      loading: Loading,
    }),
  },
  {
    path: '*',
    component: Loadable({
      loader: () => import('../pages/app/404'),
      loading: Loading,
    }),
  },
];

@withRouter
@connect(() => {
  return {};
})
class PayRoutes extends PureComponent {
  render() {
    const cells = routes.map((route) => {
      const {
        path,
        component: AppComponent,
        ...rest
      } = route;
      const relPath = `${basePath}${path}`;
      return (
        <Route
          key={relPath}
          path={relPath}
          {...rest}
          render={(props) => { // eslint-disable-line
            return <AppComponent {...props} />;
          }}
        />
      );
    });
    return (
      <Switch>
        {cells}
      </Switch>
    );
  }
}

export default PayRoutes;

